<template>
  <el-popover placement="bottom" width="350" trigger="click">
    <el-tabs v-model="activeName" @tab-click="MyMsg(activeName)">
      <el-tab-pane label="邮件" name="1"></el-tab-pane>
      <el-tab-pane label="消息" name="2"></el-tab-pane>
      <el-tab-pane label="通知" name="3"></el-tab-pane>
    </el-tabs>
    <el-scrollbar style="height: 300px">
      <avue-notice
        :data="data"
        :option="option"
        @page-change="pageChange"
        @click="msgListClick"
      >
      </avue-notice>
    </el-scrollbar>
    <div slot="reference">
      <el-badge is-dot>
        <i class="el-icon-bell"></i>
      </el-badge>
    </div>
  </el-popover>
</template>

<script>
import EventBus from "@/eventbus.js";
import { myNewsNum, sendIsDone, getMyMsg } from "../../../api/center/message";
import { getStore } from "@/util/store.js";
import {
  createSocket,
  bbbbb,
  send,
  getMessage,
  close,
} from "../../../websocket/socket";

let list = [
  /* {
       img: "./favicon.png",
       title: "比尔·费尔南德斯 关注了你",
       subtitle: "05-08 15:08",
       status: 4,
       tag: "已完成",
     },*/
];
export default {
  name: "top-notice",
  data() {
    return {
      socket: "",
      aaa: "",
      notifyPromise: Promise.resolve(),
      activeName: "3",
      msgCount: 0,
      msgoffset: 70,
      topId: "",
      option: {
        props: {
          title: "title",
          subtitle: "create_time",
          status: "status",
          tag: "tag",
          content: "content",
          isdone: "isdone",
        },
      },
      data: [],
    };
  },
  created() {
    this.init();
    this.myNewsNum();
    this.MyMsg(3);
  },
  methods: {
    init: function () {
      createSocket(window._CONFIG.wsUrl, this.handlerMsg);
    },
    handlerMsg(msg) {
      console.log(msg, "msg");
      const this_ = this;
      /*if (text) {
          this.msgCount = this.msgCount + text.length;
          this.$store.commit("SET_MSG_COUNT", this.msgCount);
          for (let key in text) {
            this_.notifyPromise = this_.notifyPromise.then(() => {
              let notify = this_.$notify({
                title: text[key].title,
                message: text[key].content,
                offset: this_.msgoffset,
                // duration: 3000,
                onClick: () => {
                  this_.msgClick(text[key], notify);
                },
              });
            });
          }
        }*/
      if (msg.type == 1) {
        this.msgCount = this.msgCount + 1;
        this.$store.commit("SET_MSG_COUNT", this.msgCount);
        this_.notifyPromise = this_.notifyPromise.then(() => {
          let notify = this_.$notify({
            title: "邮箱",
            message: "您有一条新邮件",
            offset: this_.msgoffset,
            duration: 3000,
            onClick: () => {
              //this_.msgClick(msg.message, notify);
              // this.$router.push(msg.url);
            },
          });
        });
      }
      if (msg.type == 2) {
        this.msgCount = this.msgCount + 1;
        this.$store.commit("SET_MSG_COUNT", this.msgCount);
        this_.notifyPromise = this_.notifyPromise.then(() => {
          let notify = this_.$notify({
            title: "系统消息",
            message: "您有一条系统消息",
            offset: this_.msgoffset,
            duration: 3000,
            onClick: () => {
              //this_.msgClick(msg.message, notify);
              // this.$router.push(msg.url);
            },
          });
        });
      }
      if (msg.type == 3) {
        this.msgCount = this.msgCount + 1;
        this.$store.commit("SET_MSG_COUNT", this.msgCount);
        this_.notifyPromise = this_.notifyPromise.then(() => {
          let notify = this_.$notify({
            title: "通知",
            message: "您有一条新消息",
            offset: this_.msgoffset,
            duration: 3000,
            onClick: () => {
              //this_.msgClick(msg.message, notify);
              // this.$router.push({ path: msg.url, query: { id: msg.cid } });
            },
          });
        });
      }
      if (msg.type == 4) {
        return;
      }
      if (msg.type == 7) {
        this.msgCount = this.msgCount + 1;
        this.$store.commit("SET_MSG_COUNT", this.msgCount);
        this_.notifyPromise = this_.notifyPromise.then(() => {
          let notify = this_.$notify({
            title: "新闻",
            message: "您收到一条新闻，请查看",
            offset: this_.msgoffset,
            duration: 3000,
            onClick: () => {
              //this_.msgClick(msg.message, notify);
              // this.$router.push(msg.url);
            },
          });
        });
      }
    },
    msgClick(val, this_) {
      if (this_ && this_.close) {
        this_.close();
      }
      this.msgCount = this.msgCount > 0 ? this.msgCount - 1 : 0;
      this.$store.commit("SET_MSG_COUNT", this.msgCount);
      this.$router.push("/center/message");
    },
    msg(this_) {
      if (this_ && this_.close) {
        this_.close();
      }
      this.$store.commit("SET_MSG_COUNT", this.msgCount);
      this.$router.push("/center/message");
    },
    deepCleon(children, url, num, topid) {
      for (var item of children) {
        if (num == 1) {
          topid = item.id;
        }
        if (item.children) {
          this.deepCleon(item.children, url, 2, topid);
        } else if (url == item.path) {
          this.topId = topid;
          break;
        }
      }
    },
    msgListClick(val) {
      console.log(val, "val");
      this.msgCount = this.msgCount > 0 ? this.msgCount - 1 : 0;
      this.$store.commit("SET_MSG_COUNT", this.msgCount);
      let topMenu =
        getStore({
          name: "leftmenu",
          debug: true,
        }) || {};
      let menu =
        getStore({
          name: "menu",
          debug: true,
        }) || {};
      console.log(topMenu.content);
      if (
        JSON.stringify(menu.content) == "[]" ||
        JSON.stringify(menu) == "{}"
      ) {
        this.deepCleon(topMenu.content, val.url, 1);
        this.$store
          .dispatch("GetTopMenuFirstLocal", this.topId)
          .then((data) => {
            // console.log(data);
          });
      }
      sendIsDone(val.id).then((res) => {
        if (res.status == "200") {
          this.MyMsg(this.activeName);
        }
        if (this.$route.path == val.url) {
          EventBus.$emit("curPage", val.cid);
        } else {
          this.$router.push({
            path: val.url + "?type=0",
            query: { id: val.cid },
          });
        }
      });
      // 移除掉 list中的当前元素
    },
    pageChange(page, done) {
      setTimeout(() => {
        // this.$message.success("页码" + page);
        if (list.length == 0) {
          this.$message({
            type: "warning",
            message: "暂无更多数据",
          });
        }
        this.data = this.data.concat(list);
        done();
      }, 1000);
    },
    MyMsg(sort) {
      let that = this;
      getMyMsg(sort).then((res) => {
        let data = res.data.data;
        that.data = data;
        // this.list = data
      });
    },
    myNewsNum() {
      const this_ = this;
      myNewsNum().then((res) => {
        let data = res.data.data;
        if (data >= 1) {
          this_.msgCount = data;
          this.$store.commit("SET_MSG_COUNT", this.msgCount);
          // if(data >=1){
          let notify = this_.$notify({
            title: "消息通知",
            message: "您有" + data + "条消息,请注意查看",
            offset: this_.msgoffset,
            duration: 3000,
            // onClick: () => {
            //   this_.msg(notify);
            // },
          });
        } else {
          this.$store.commit("SET_MSG_COUNT", 0);
        }

        //  }
      });
    },
    /*destroyed () {
          // 销毁监听
          this.socket.onclose = this.close
        }*/
  },
};
</script>


